<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!-- 访问的基本路径,此页面的所有的跳转都是基于此地址作为基本地址 -->
<base href="<%=basePath%>">


<meta charset="utf-8" />
<title></title>
<!--主题样式-->
<link rel="stylesheet" type="text/css"href="resources/easyui/themes/default/easyui.css">
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<!--jquery文件-->
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<!--easyui的核心js-->
<script type="text/javascript"src="resources/easyui/jquery.easyui.min.js"></script>
<!-- 引入中文文件 -->
<script type="text/javascript"src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">

	$(function(){
		
		$("#myDataGrid").datagrid({
			fit:true,
			fitColumns:true,
			url:'singer/singerList.do',
			method:'post',
			pagination:true, //显示分页条
			//pageList:[1,3,4],
			//pageSize:1, 
			toolbar:"#toolbar", //顶部工具条
			striped:true, //斑马线效果
			singleSelect:true//只能够选中一行,默认可以选中多行				
		});	
				
	});
	
		
	//新增打开对话框
	function openDialog(){
		//打开对话框
		$("#myDialog").dialog("open");	
		//设置标题
		$("#myDialog").dialog("setTitle","新增歌手");
		//清除表单数据
		$("#singerForm").form("clear");
	}
	
	//关闭对话框
	function closeDialog(){
		//关闭对话框
		$("#myDialog").dialog("close");	
	}
	
	//保存或者更新
	function saveOrUpdateSinger(){
		//获取歌手的id,如果id有值,修改操作；如果没有值,保存操作
		var singer_id = $("#singer_id").val();
		
		var url = null;
		if(singer_id !=""){//修改操作
			url = "singer/updateSinger.do";			
		}else{//保存操作
			url = "singer/addSinger.do";			
		}	
					
		$('#singerForm').form('submit', {    
		    url:url,    
		    success:function(data){
		    	data = eval('('+ data +')');
		    	
		    	if(data.code == 1){
		    		$.messager.alert("温馨提示",data.msg,'info');	
		    		//关闭对话框
		    		$("#myDialog").dialog("close");
		    		//重新加载datagrid
		    		$("#myDataGrid").datagrid("reload");
		    		
		    	}else{
		    		$.messager.alert("温馨提示",data.msg,'error');	
		    	}
		    }    
		});  		
	}
		
	//编辑模块
	function editSinger(){
		//获取选中行的数据 (json对象)
		var rowData = $("#myDataGrid").datagrid("getSelected");
		
		if(rowData == null){
			$.messager.alert("温馨提示","请选择需要修改的行",'warning'); 
			return;
		}
		
		//回显表单数据: 调用表单的load方法
		$("#singerForm").form("load",rowData);		
		//打开对话框
		$("#myDialog").dialog("open");	
		//设置标题
		$("#myDialog").dialog("setTitle","编辑歌手");
	}
			
	//删除操作
	function del(){
		//1.获取选中行的数据 (json对象)
		var rowData = $("#myDataGrid").datagrid("getSelected");
		if(rowData == null){
			$.messager.alert("温馨提示","请选择需要删除的行",'warning'); 
			return;
		}
		
		$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
		    if (r){    
		    	//2.获取选中行数据的id
				var singer_id = rowData.singer_id;
				//3向后台发送ajax请求删除数据
				$.get("singer/deleteSingerById.do",{"singer_id":singer_id},function(data){
					if(data.code == 1){
			    		$.messager.alert("温馨提示",data.msg,'info');  
			    		//重新加载datagrid
			    		$("#myDataGrid").datagrid("reload");
			    		
			    	}else{
			    		$.messager.alert("温馨提示",data.msg,'error'); 
			    	}
				});
		    }    
		});  
	}
	
	//格式化
	function formatterPowerDisplay(value,row,index){
		if(value == 0){
			return "男"
		}else{
			return "女"
		}
	}
				
	//热门歌曲管理
	function hitSongMg(){
		//获取选中行的数据 (json对象)
		var rowData = $("#myDataGrid").datagrid("getSelected");
		
		if(rowData == null){
			$.messager.alert("温馨提示","请选择行",'warning'); 
			return;
		}
				
		var singer_id = rowData.singer_id;
		
		//设置所有歌曲datagrid
		$("#allSong").datagrid({
			pagination:true,
			singleSelect: true,			
			fitColumns : true,	
			url:"hitSong/songList.do?singerId="+singer_id,			
			onDblClickRow:function(rowIndex, rowData){
				//获取热门歌曲所有行数据
				var rows = $("#hitSong").datagrid("getRows");								
				//需要被选中的索引
				var index = -1;
				//标识
				var flag = false;
			
				for(var i = 0;i<rows.length;i++){
					//获取热门歌曲每行的数据
					var row = rows[i];
					//判断行数据和所有歌曲选中的id是否相等
					if(row.song_id == rowData.song_id){
						index = i;
						flag = true;
						break;
					}										
				}
							
				if(flag){
					//选中已有的热门歌曲
					$("#hitSong").datagrid("selectRow",index);
				}else{
					//将选中行插入热门歌曲datagrid中
					$("#hitSong").datagrid("appendRow",rowData);
				}
			}																
		});
		
		//获取所有歌曲datagrid的分页条
		var pager = $('#allSong').datagrid('getPager');	
		//设置分页条显示的样式
		pager.pagination({
			showRefresh:false,
			/* displayMsg:"", */
			showPageList:false
		});
		
		var singer_hitsong = rowData.singer_hitsong;
		
		//设置热门歌曲datagrid
		$("#hitSong").datagrid({
			fitColumns : true,
			singleSelect: true,
			pagination:true,
			url:"hitSong/songList.do?hitSong="+singer_hitsong,
			
			onDblClickRow:function(rowIndex,rowData){
				$("#hitSong").datagrid("deleteRow",rowIndex);				
			}							
		})
				
		//获取热门歌曲datagrid的分页条
		var pager = $('#hitSong').datagrid('getPager');	
		//设置分页条显示的样式
		pager.pagination({
			showRefresh:false,
			/* displayMsg:"", */
			showPageList:false
		});
						
		//回显表单数据: 调用表单的load方法
		$("#hitSongForm").form("load",rowData);		
		//打开对话框
		$("#hitSongMgDialog").dialog("open");	
		//设置标题
		$("#hitSongMgDialog").dialog("setTitle","热门歌曲管理");				
	}
	
	//保存热门歌曲
	function updateHitSong(){				
		$("#hitSongForm").form("submit",{
			url:"hitSong/updateHitSong",
			
			onSubmit: function(param){
				var rows = $("#hitSong").datagrid("getRows");			    
				if(rows.length == 0){
					$.messager.alert("温馨提示","热门歌曲不能为空!",'warning'); 
					return false;
				}
				
				//循环热门歌曲,获取song_id,用逗号拼接成singer_hitSong
				var singer_hitSong = "";
				for(var i= 0;i<rows.length;i++){
					//获取每行的数据
					var row = rows[i];									
					singer_hitSong += row.song_id +","
				}
				//去掉最后逗号
				singer_hitSong = singer_hitSong.substring(0,singer_hitSong.length-1);
				
				//拼接的singer_hitSong作为参数提交
				param.singer_hitSong = singer_hitSong;				
				
				return true;
			}, 
			success: function(data){
				data = eval("("+data+")");
		    	if(data.code == 1){
		    		$.messager.alert("温馨提示",data.msg,'info');  
		    		//关闭对话框
		    		$("#hitSongMgDialog").dialog("close");	
		    		//重新加载datagrid
		    		$("#myDataGrid").datagrid("reload");
		    		
		    	}else{
		    		$.messager.alert("温馨提示",data.msg,'error'); 
		    	}			
			} 		
		});
		
	}
	
	//关闭热门歌曲对话框
	function closeHitSong(){
		$("#hitSongMgDialog").dialog("close");			
	}
		
	//搜索
	function searchBox(){
		$("#myDataGrid").datagrid("load",{
			keyword:$("#keyword").val()			
		});			
	}
		
</script>

<!-- 表单对话框 dialog -->
<div id="myDialog" class="easyui-dialog" 
	data-options="{width:400,height:450,buttons:'#dialogButtons',closed:true}">
	
	<form id="singerForm" method="post">
		<!-- 模块id,用于修改的时候用 -->
		<input type="hidden" id="singer_id" name="singer_id">
		<table align="center" style="margin-top: 10px">
			<tr>
				<td>歌手图片</td>
				<td><input name="singer_pic" class="easyui-validatebox"></td>
			</tr>			
			<tr>
				<td>歌手名称</td>
				<td><input name="singer_name" class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td>歌手性别</td>				
				<td>
					男<input type="radio" name="singer_gender" value="0" checked="checked">
					女<input type="radio" name="singer_gender" value="1">				
				</td>								
			</tr>
			<tr>
				<td>歌手热度</td>
				<td><input name="singer_hit" class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td>出道时间</td>
				<td><input name="singer_debut" type="text" class="easyui-datebox" required="required"></td>
			</tr>
			<tr>
				<td>收藏次数</td>
				<td><input name="singer_like" class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td>歌手地区</td>
				<td>					
					<select name="singer_location" class="easyui-combobox" data-options="{required:true}" >
						<option>内地</option>
						<option>香港</option>
						<option>台湾</option>
						<option>日韩</option>
						<option>欧美</option>
					</select>					
				</td>				
			</tr>
			<tr>
				<td>歌手生日</td>
				<td><input name="singer_birth" type="text" class="easyui-datebox" required="required"></td>
			</tr>			
			<tr>
				<td>歌手简介</td>
				<td>
					<textarea name="singer_info" rows="4" required="required"></textarea>				
				</td>					
			</tr>
			<tr>
				<td>歌手状态</td>
				<td>
					<select name="singer_status" class="easyui-combobox" data-options="{required:true}" >
						<option value="0">0</option>
						<option value="1">1</option>						
					</select>				
				</td>				
			</tr>
			<tr>
				<td>访问次数</td>
				<td><input name="singer_visit" class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>						
		</table>
	</form>	
</div>

<!-- 热门歌曲管理对话框 -->
<div id="hitSongMgDialog" class="easyui-dialog" data-options="width:610,height:450,buttons:'#hitSongButtons',closed:true">
	<form id="hitSongForm" action="" method="post">
		<table style="margin-top:15;" align="center">
			<tr>
				<td>
					 歌手名称: <input id="singer_name" name="singer_name" readonly="readonly">									
				</td>
				<td>
					<input type="hidden" id="singer_id" name="singer_id">
				</td>			
			</tr>			
			<tr>
				<td>
					<!-- 热门歌曲 -->
					<table id="hitSong" style="width: 300px;height:300px;" class="easyui-datagrid"
						data-options="{'title':'热门歌曲',fit:true}">
						<thead>
							<th data-options="field:'song_name',width:1">歌曲名称</th>
						</thead>
					</table>
				</td>				
				<td>
					<!-- 所有歌曲 -->
					<table id="allSong" style="width: 300px;height:300px;" class="easyui-datagrid"
						data-options="{'title':'所有歌曲'}">
						<thead>
							<th data-options="field:'song_name',width:1">歌曲名称</th>
						</thead>
					</table>
				</td>
			</tr>		
				
		</table>
	</form>
</div>

<!-- 对话框底部的工具条 -->
<div id="dialogButtons">
	<a onclick="saveOrUpdateSinger();" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">保存</a>
	<a onclick="closeDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>

<!-- 热门歌曲管理底部工具条 -->
<div id="hitSongButtons">
	<a onclick="updateHitSong();" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">保存</a>
	<a onclick="closeHitSong();" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>

<!-- datagrid的顶部工具条 -->
<div id="toolbar">
	<!-- 按钮组 -->
	<div>
		<a onclick="openDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-add',plain:true}"></a>
		<a onclick="editSinger();"class="easyui-linkbutton" data-options="{iconCls:'icon-edit',plain:true}"></a>		
		<a onclick="del();" class="easyui-linkbutton" data-options="{iconCls:'icon-remove',plain:true}"></a>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a onclick="hitSongMg();" class="easyui-linkbutton">热门歌曲管理</a>
	</div>
	<!-- 搜索组 -->
	<div>	
		<input id="keyword" placeholder="请输入歌手名称">
		<a onclick="searchBox();" class="easyui-linkbutton" data-options="{iconCls:'icon-search'}">搜索</a>
	</div> 			
</div>

<!-- datagrid 组件 -->
<table  id="myDataGrid" class="easyui-datagrid" >
	<thead>
		<tr>
			<th data-options="field:'singer_id',width:1">歌手id</th>
			<th data-options="field:'singer_pic',width:1">歌手图片</th>
			<th data-options="field:'singer_name',width:1">歌手名称</th>
			<th data-options="field:'singer_gender',width:1,formatter:formatterPowerDisplay">歌手性别</th>
			<th data-options="field:'singer_hit',width:1">歌手热度</th>
			<th data-options="field:'singer_debut',width:1">出道时间</th>
			<th data-options="field:'singer_like',width:1">收藏次数</th>
			<th data-options="field:'singer_location',width:1">歌手地区</th>
			<th data-options="field:'singer_birth',width:1">歌手生日</th>
			<th data-options="field:'singer_info',width:1">歌手简介</th>
			<th data-options="field:'singer_status',width:1">歌手状态</th>
			<th data-options="field:'singer_visit',width:1">访问次数</th>			
		</tr>
	</thead>
</table >


